<template>
  <div class="cron_input" :val="value_">
    <Form :model="form" :label-width="80">
      <FormItem style="margin-top: -10px; margin-bottom:0px;">
        <CronItem ref="cronitem" v-show="showCronBox" v-model="form.cronExpression" :showtabls="showtabls"></CronItem>
        <span style="color: #E6A23C; font-size: 12px;">{{$t('corn_note')}}</span>
      </FormItem>
      <FormItem :label="$t('cron_expression')">
        <Input v-model="form.cronExpression" auto-complete="off">
          <Button slot="append" v-if="!showCronBox" icon="ios-arrow-up" @click="open" :title="$t('show_configuration_page')"></Button>
          <Button slot="append" v-else icon="ios-arrow-down" @click="close" :title="$t('hide_configuration_page')"></Button>
        </Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import CronItem from './components/CronItem'

export default {
  name: 'schesule-cron',
  components: { CronItem  },
  props: {
    value: {type: String},
    showItems: {
      /*允许显示哪些 页，如：[秒，分，时......]*/
      type: Array,
      default(){return [];}
    }
  },
  computed:{
    value_ () {
      let v=this.form.cronExpression;
      this.$emit('input', v);
      return v
    }
  },
  watch: {
    value(){
      this.form.cronExpression=this.value;
    },
    showItems(){
      this.showtabls = this.showItems;
    }

  },
  data () {
    return {
      showCronBox: false,
      form: {
        cronExpression: ''
      },
      showtabls:[]

    }
  },
  methods:{
    open(){
      //this.showCronBox = true;
    },
    close(){
      this.showCronBox = false;
    }
  },
  mounted() {
    console.log("cron.mounted()")
  }

}
</script>

<style>
.cron_input {
/*  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  text-align: center;
  width: 100%;
  color: #2c3e50;
/*  margin-top: 60px;*/
}
</style>
